
<script setup>
import { ref, reactive, defineAsyncComponent } from 'vue'
import page from '@/components'
import { onBeforeRouteUpdate,onBeforeRouteLeave } from 'vue-router';

const { showdemo1, showdemo2, SonCom2, SonCom4, Comp2, Left, Right } = page

// 异步加载组件
// const Comp1 = defineAsyncComponent(()=>import('@/components/Comp1.vue'))
const Comp1 = defineAsyncComponent({
  loader: () => import('@/components/Comp1.vue'),
  //加载中的组件
  loadingComponent: showdemo2,
  //展示加载组件前的延迟时间，默认为200ms
  delay: 200,
  //加载失败后展示的组件
  errorComponent: showdemo1,
  //如果提供了一个timeout时间限制，并超时了也会展示这里配置的报错组件，
  timeout: 3000
})

console.info("%c哈哈", "color: #3190e8; font-size: 30px; font-family: sans-serif");
</script>

<template>
  <div class="main-box">
    <showdemo1></showdemo1>
    <showdemo2></showdemo2>
    <Comp1></Comp1>
    <SonCom2></SonCom2>
    <SonCom4>
      <template #header="headerProps">
        {{headerProps}}
        我是头部内容:{{headerProps.text}}
      </template>
      <template v-slot:content="scope">
        我是中间内容:{{scope.text}}
        <div>学生姓名为：{{scope.userInfo.name}}</div>
        <div>学生年龄为：{{scope.userInfo.age}}</div>
      </template>
    </SonCom4>
    <Comp2/>
    <Left></Left>
    <Right></Right>
  </div>
</template>

<style  lang="less" scoped>
.main-box{
  // display: flex;
}
</style>
    